<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="賬戶分類" prop="bankType">
              <el-select
                style="width: 100%"
                v-model="form.bankType"
                placeholder="請選擇賬戶分類"
              >
                <el-option
                  v-for="dict in dict.type.bank_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="賬戶名稱" prop="accountName">
              <el-input
                v-model="form.accountName"
                placeholder="請輸入賬戶名稱"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="銀行名稱" prop="bankName">
              <el-input v-model="form.bankName" placeholder="請輸入銀行名稱" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="銀行賬號" prop="bankNo">
              <el-input v-model="form.bankNo" placeholder="請輸入銀行賬號" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="銀行代碼" prop="bankCode">
              <el-input v-model="form.bankCode" placeholder="請輸入銀行代碼" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="芯片編號" prop="chipsNo">
              <el-input v-model="form.chipsNo" placeholder="請輸入芯片編號" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="swift代碼" prop="swiftCode">
              <el-input
                v-model="form.swiftCode"
                placeholder="請輸入swift代碼"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="經辦人" prop="operator">
              <el-input v-model="form.operator" placeholder="請輸入經辦人" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="聯繫電話" prop="operatorPhone">
              <el-input
                v-model="form.operatorPhone"
                placeholder="請輸入聯繫電話"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否默認" prop="defaultFag">
              <el-select
                style="width: 100%"
                v-model="form.defaultFag"
                placeholder="請選擇是否默認"
              >
                <el-option
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="啟用狀態" prop="enable">
              <el-select
                style="width: 100%"
                v-model="form.enable"
                placeholder="請選擇啟用狀態"
              >
                <el-option
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="備註" prop="remark">
              <el-input v-model="form.remark" placeholder="請輸入備註" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm">確 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-col>
      </el-row>
    </div>
  </div>
</template>
    
    <script>
import {
  listBank,
  getBank,
  delBank,
  addBank,
  updateBank,
} from "@/api/biz/bank";
export default {
  name: "BankEdit",
  dicts: ["bank_type", "sys_yes_no", "sys_normal_disable"],
  data() {
    return {
      // 表单參數
      form: {},
      // 表单校验
      rules: {
        bankType: [
          { required: true, message: "賬戶分類不能為空", trigger: "change" },
        ],
        accountName: [
          { required: true, message: "賬戶名稱不能為空", trigger: "change" },
        ],
        bankNo: [
          { required: true, message: "銀行賬號不能為空", trigger: "change" },
        ],
        bankName: [
          { required: true, message: "銀行名稱不能為空", trigger: "change" },
        ],
        defaultFag: [
          { required: true, message: "是否默認不能為空", trigger: "change" },
        ],
        enable: [
          { required: true, message: "啟用狀態不能為空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.form = this.$route.query
  },
  activated() {
    this.form = this.$route.query
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateBank(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/entry/bank", name: "Bank" };
                this.$tab.refreshPage(obj);
              });
              
            });
          } else {
            addBank(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/entry/bank", name: "Bank" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>
    